/**
 * 首页特定的JavaScript功能
 */

// DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化首页特效
    initHeroAnimation();
    
    // 加载紧急需求数据
    loadUrgentDemands();
    
    // 初始化教程动画
    initTutorialAnimation();
});

/**
 * 初始化首页横幅动画
 */
function initHeroAnimation() {
    // 横幅元素已经在CSS中设置了动画，这里可以添加额外的动画效果
    const heroContent = document.querySelector('.hero-content');
    if (heroContent) {
        heroContent.classList.add('fade-in');
    }
}

/**
 * 加载紧急需求数据
 */
async function loadUrgentDemands() {
    try {
        // 获取需求容器
        const demandsGrid = document.querySelector('.demands-grid');
        if (!demandsGrid) return;
        
        // 显示加载状态
        demandsGrid.innerHTML = '<div class="loading-container"><div class="spinner"></div><p>加载中...</p></div>';
        
        // 模拟从API获取数据
        const response = await window.utils.fetchData('api/demands?urgent=true&limit=3');
        
        if (response.success && response.data.length > 0) {
            // 清空加载状态
            demandsGrid.innerHTML = '';
            
            // 渲染需求卡片
            response.data.forEach(demand => {
                const card = createDemandCard(demand);
                demandsGrid.appendChild(card);
            });
        } else {
            // 显示无数据状态
            demandsGrid.innerHTML = '<div class="empty-state">暂无紧急需求</div>';
        }
    } catch (error) {
        console.error('加载需求失败:', error);
        // 显示错误状态
        const demandsGrid = document.querySelector('.demands-grid');
        if (demandsGrid) {
            demandsGrid.innerHTML = '<div class="error-state">加载失败，请稍后重试</div>';
        }
    }
}

/**
 * 创建需求卡片元素
 * @param {Object} demand - 需求数据
 * @returns {HTMLElement} - 卡片DOM元素
 */
function createDemandCard(demand) {
    const card = document.createElement('div');
    card.className = 'demand-card';
    
    // 设置卡片内容
    card.innerHTML = `
        ${demand.isUrgent ? '<div class="demand-tag urgent">紧急</div>' : ''}
        <h3>${demand.title}</h3>
        <div class="demand-info">
            <p><i class="bi bi-geo-alt"></i> ${demand.location}</p>
            <p><i class="bi bi-calendar3"></i> ${demand.startDate} 至 ${demand.endDate}</p>
            <p><i class="bi bi-book"></i> ${demand.subjects.join('、')}</p>
        </div>
        <a href="demand-detail.html?id=${demand.id}" class="btn btn-outline">查看详情</a>
    `;
    
    return card;
}

/**
 * 初始化教程动画
 */
function initTutorialAnimation() {
    // 教程步骤元素已经在CSS中设置了动画，这里可以添加额外的交互效果
    const tutorialSteps = document.querySelectorAll('.tutorial-step');
    
    // 监听滚动事件，当教程部分进入视口时触发动画
    window.addEventListener('scroll', function() {
        const tutorialSection = document.querySelector('.tutorial');
        if (!tutorialSection) return;
        
        const sectionTop = tutorialSection.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        
        // 当教程部分进入视口时
        if (sectionTop < windowHeight * 0.75) {
            tutorialSteps.forEach((step, index) => {
                // 添加动画类，延迟显示
                setTimeout(() => {
                    step.style.opacity = '1';
                    step.style.transform = 'translateY(0)';
                }, index * 200);
            });
        }
    });
}

/**
 * 特色卡片悬停效果
 */
function initFeatureCardHover() {
    const featureCards = document.querySelectorAll('.feature-card');
    
    featureCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px)';
            this.style.boxShadow = '0 10px 20px rgba(0, 0, 0, 0.1)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
        });
    });
}

// 初始化特色卡片悬停效果
document.addEventListener('DOMContentLoaded', initFeatureCardHover);